<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div id="app">
  <h1 id="tit">{{count}}</h1>
  <button v-on:click="count+=1">Add</button>
<!--  <h1>{{num}}</h1>-->
<!--  <button v-on:click="num+=1">num Add</button>-->
</div>
<script src="vue.js"></script>
<script>
  /*// beforeCreate()
  let h1 = document.createElement('h1')
  h1.innerText = count
  // created()
  // 渲染

  // beforeMount()
  document.querySelector('#app').append(h1)
  // mounted()*/

  const app = new Vue({
    el: '#app',
    // 只有在data中声明的变量才会有数据响应式
    // 数据变化 视图就会发生变化
    // model -> view
    // v-model:(view -> model)
    data: {
      count: 123
    },
    mounted() {
      // this.num = 10
      console.log('mounted')
    },
    beforeCreate() {
      console.log(document.getElementById('tit'))
      console.log('beforeCreate')
    },
    beforeMount() {
      console.log('beforeMount')
    },
    created() {
      console.log('created')
    }
  })

  console.log(app)

</script>


</body>
</html>